<template>
  <div class="nav-bottom">
    <div class="left">
      <Icon @click.stop="openStart"><House /></Icon>
      <el-input
        v-model="homeSearch"
        placeholder="在这里输入你要搜索的内容"
        :prefix-icon="Search"
        :style="{ width: '320px' }"
      />
      <Icon><ChatRound /></Icon>
      <Icon><Menu /></Icon>
    </div>
    <div class="center">
      <div
        class="icon"
        v-for="(icon, index) in activedDesktopIcon"
        :key="icon.wid"
        :class="{active: icon.wid === windowStore.currentActiveId }"
      >
        <MinState :iconInfo="icon" :index="index" />
      </div>
    </div>
    <div class="right">
      <Icon v-bind="iconStyle"><ArrowUp /></Icon>
      <Icon v-bind="iconStyle"><Microphone /></Icon>
      <Icon v-bind="iconStyle"><Picture /></Icon>
      <div class="lang">中</div>
      <div class="time">
        <span>{{ time }}</span>
        <span>{{ nowDate }}</span>
      </div>
      <Icon v-bind="iconStyle"><Bell /></Icon>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import { useWindowStore } from '@/store/window'
import Icon from '@/components/icon'
import MinState from '@/components/min-state'
import {
  House,
  Search,
  ChatRound,
  Menu,
  ArrowUp,
  Microphone,
  Picture,
  Bell
} from '@element-plus/icons-vue'

import { useRealTime } from './hooks/use-real-time'

const windowStore = useWindowStore()
const homeSearch = ref('')
const iconStyle = reactive({
  padStyle: '10px 7px',
  size: 18
})
const [time, nowDate] = useRealTime()

// 底部图标
const activedDesktopIcon = computed(() => windowStore.winConfigs)

const emit = defineEmits(['openStart'])
const openStart = () => {
  emit('openStart')
}
</script>

<style lang="less" scoped>
.nav-bottom {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 34px;
  box-sizing: border-box;
  background-color: rgb(132, 158, 158);
  display: flex;
  .left {
    display: flex;
    place-items: center;
  }
  .center {
    flex: 1;
    display: flex;
    .icon {
      box-sizing: border-box;
      height: 34px;
      width: 40px;
      display: inline-block;
      border-bottom: 3px solid #409eff;
      margin: 0 4px;
    }
  }
  .right {
    display: flex;
    .lang {
      line-height: 34px;
      padding-right: 8px;
    }
    .time {
      font-size: 12px;
      display: flex;
      place-items: center;
      flex-direction: column;
      margin-right: 8px;
      span {
        display: block;
      }
    }
  }
}

:deep(.el-input__wrapper) {
  border-radius: 0px;
}
.active {
  background-color: rgba(255, 255, 255, .7);
}
</style>
